<template>
  <div id="receipt-number">
    <c-title text="快递签收"></c-title>
    <div class="receipt-box">
      <div class="receipt-row">
        <span class="left-name">物流单号</span>
        <span class="order-value">{{express_sn}}</span>
      </div>
      <div class="receipt-row">
        <span class="left-name">需收取可用{{basic_info.love || "爱心值"}}</span>
        <span class="love-value">{{deduct_love}}</span>
      </div>
      <div class="upload-row">
        <div class="img-name">
          <!-- <span class="star-icon">*</span> -->
          <span>上传图片</span>
        </div>
        <div class="img-row">
          <yz_uploader v-model="imgList" :max_count="1" :isCustomStyle="true" :styles="{ padding: '0', margin: '0 0.6rem 0.6rem 0' }" @inputimg="inputimg">
            <div class="upload-box"><van-icon name="plus" class="plus-icon" /></div>
          </yz_uploader>
        </div>
      </div>
    </div>
    <div @click="confirm" :class="[this.fun.getPhoneEnv() == 3 ? 'pcStyle bottom-receipt' : 'bottom-receipt']">签收</div>

    <van-overlay :show="overlayShow" class="overlay-love" :lock-scroll="false">
      <div class="love-list">
        <div :class="[this.fun.getPhoneEnv() == 3 ? 'pcStyle love-row' : 'love-row']">
          <div class="title">可用{{basic_info.love || "爱心值"}}不足</div>
          <div class="tip">可通过以下方式获取</div>
          <div class="love-box">
            <div class="detail-rol" v-for="(item,key) in buy_button" :key="key" v-if="!Array.isArray(buy_button[key])" @click="clickBuyButton(item.web_link)">
              <img :src="buy_button[key].img_url" alt="" />
              <span class="img-name">{{buy_button[key].name}}</span>
            </div>
          </div>
        </div>
        <i class="iconfont icon-adsystem_icon_cancle" @click="closeOverlayShow"></i>
      </div>
    </van-overlay>

    <van-overlay :show="signedShow" class="signed-show">
      <div class="signed-box">
        <div class="top-title">签收成功!</div>
        <div class="bottom-tip" @click="closeOverlayShow">知道了</div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import receipt_number_controller from "./receipt_number_controller";

export default receipt_number_controller;
</script>

<style>
.imgUploader {
  padding: 0 !important;
}

.imgUploader .photoBox {
  width: 5.5rem !important;
  height: 5.5rem !important;
  border-radius: 0.4rem;
}

.imgUploader .van-uploader {
  width: 5.5rem !important;
  height: 5.5rem !important;
  background: white !important;
  border-radius: 0.4rem;
}

.imgUploader .photoBox i {
  top: -0.6rem !important;
  right: -0.6rem !important;
}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
.upload-box {
  width: 5.5rem;
  height: 5.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.4rem;
  .plus-icon {
    font-size: 1.5rem;
    color: #aaaab3;
  }
}

.pcStyle {
  width: 375px !important;
}

#receipt-number {
  .receipt-box {
    background: white;
    margin: 0.6rem;
    padding: 0.85rem 0.6rem;
    border-radius: 0.4rem;
    .receipt-row {
      margin-bottom: 0.85rem;
      display: flex;
      align-items: center;
      border-bottom: 0.1rem solid #F0F0F1;
      padding-bottom: 0.85rem;
      .left-name {
        font-size: 0.8rem;
        font-weight: normal;
        color: #00001c;
        width: 4rem;
        margin-right: 1.2rem;
        display: block;
        text-align: left;
      }
      .order-value {
        font-size: 0.8rem;
        font-weight: normal;
        color: #00001c;
      }
      .love-value {
        font-size: 0.8rem;
        font-weight: normal;
        color: #f15353;
      }
    }
    .upload-row {
      margin: 1.2rem 0 0.25rem 0;
      display: flex;
      .img-name {
        font-size: 0.8rem;
        font-weight: normal;
        color: #00001c;
        width: 4rem;
        margin-right: 1.2rem;
        display: block;
        text-align: left;
        white-space: nowrap;
        .star-icon {
          color: #f15353;
        }
      }
      .img-row {
      }
    }
  }
  .bottom-receipt {
    background: #f15353;
    border-radius: 1.5rem;
    color: white;
    padding: 0.65rem 0;
    position: fixed;
    bottom: 0;
    width: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
  }
}

.overlay-love {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .love-list {
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .love-row {
    width: 100%;
    // height: 4.8rem;
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 0 0.75rem 1rem 0.75rem;
    // overflow-y: scroll;
    position: relative;
    margin-bottom: 1.3rem;
    .title {
      font-size: 0.9rem;
      font-weight: bold;
      color: #00001c;
      padding-top: 1.25rem;
    }
    .tip {
      font-size: 0.8rem;
      font-weight: normal;
      color: #3b3b4a;
      margin: 0.45rem 0 1.5rem 0;
    }
    .love-box {
      // margin-bottom: 1rem;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      // height: 4.8rem;
      // overflow-y: scroll;
      .detail-rol {
        display: flex;
        flex-direction: column;
        margin-bottom: 0.5rem;
        align-items: center;
        img {
          width: 2.75rem;
          height: 2.75rem;
          border-radius: 50%;
          margin: 0;
        }
        .img-name {
          width: 2.75rem;
          font-size: 0.8rem;
          font-weight: 400;
          color: #00001c;
          text-align: center;
          margin-top: 0.5rem;
          overflow:hidden;
          text-overflow:ellipsis;
          display:-webkit-box;
          -webkit-line-clamp:1;
          -webkit-box-orient:vertical;
        }
      }
    }
  }
  .icon-adsystem_icon_cancle {
    color: #D6D6DC;
    font-size: 2.5rem;
  }
}

.signed-show {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .signed-box {
    width: 14.5rem;
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 1.5rem 0 1.35rem 0;
    .top-title {
      font-size: 0.9rem;
      font-weight: 400;
      color: #2C2C2C;
      padding-bottom: 1.1rem;
      border-bottom: 0.05rem solid #ECECEC;
    }
    .bottom-tip {
      font-size: 0.9rem;
      font-weight: 400;
      color: #FE5E56;
      margin-top: 0.7rem;
    }
  }
}
</style>
